<template>
  <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="right" label-width="130px"
    class="demo-ruleForm login-container">
    <h3 class="title" style="margin: 0">注册</h3>
    <router-link to="/login" class="account-right">返回登录</router-link>

    <el-form-item label="注册类型:">

      <el-radio-group v-model="ruleForm2.userRegisterType">
        <!-- <el-radio label="0">个人用户注册</el-radio> -->
        <el-radio label="1">组织注册</el-radio>
      </el-radio-group>
    </el-form-item>
    <div class="login-border">
      <h2 v-if="ruleForm2.userRegisterType==1" style="text-align: center">注册新组织填写的信息</h2>
      <h2 v-if="ruleForm2.userRegisterType==0" style="text-align: center">请填写你要加入的组织信息</h2>
      <el-form-item v-show="ruleForm2.userRegisterType==0" prop="companyName" label="你要加入的组织:">
        <el-input type="text" auto-complete="off" v-model="ruleForm2.companyName" placeholder="组织名"></el-input>
      </el-form-item>
      <el-form-item v-show="ruleForm2.userRegisterType==1" prop="companyName" label="组织名:">
        <el-input type="text" auto-complete="off" v-model="ruleForm2.companyName" placeholder="组织名"></el-input>
      </el-form-item>
      <el-form-item  prop="" label="职务:">
        <el-input type="text" auto-complete="off" v-model="ruleForm2.companyLevel" placeholder="职务"></el-input>
      </el-form-item>
      <el-form-item v-show="ruleForm2.userRegisterType==1" label="网站:">
        <el-input type="site" auto-complete="off" v-model="ruleForm2.site" placeholder="网站"></el-input>
      </el-form-item>
      <el-form-item v-show="ruleForm2.userRegisterType==1" prop="" label="地址:">
        <el-input type="email" auto-complete="off" v-model="ruleForm2.address" placeholder="地址"></el-input>
      </el-form-item>
    </div>

    <div class="login-border">
      <el-form-item prop="username" label="用户名:">
        <el-input v-model="ruleForm2.username" auto-complete="off" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item prop="nickName" label="昵称:">
        <el-input v-model="ruleForm2.nickName" auto-complete="off" placeholder="昵称"></el-input>
      </el-form-item>
      <el-form-item prop="account" label="手机号:">
        <el-input type="number" v-model.number="ruleForm2.account" placeholder="手机号"></el-input>
      </el-form-item>
      <el-form-item prop="checkPass" label="密码:">
        <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="密码"></el-input>
      </el-form-item>
      <el-form-item prop="checkPass1" label="确认密码:">
        <el-input type="password" v-model="ruleForm2.checkPass1" auto-complete="off" placeholder="确认密码"></el-input>
      </el-form-item>
      <el-form-item prop="checkemail" label="邮箱:">
        <el-input type="email" auto-complete="off" v-model="ruleForm2.checkemail" placeholder="邮箱"></el-input>
      </el-form-item>

      <!-- <el-form-item prop="checkemail">
      <el-input type="email" auto-complete="off" v-model="ruleForm2.address" placeholder="地址"></el-input>
    </el-form-item>
    <el-form-item prop="companyName">
      <el-input type="textarea" auto-complete="off" v-model="ruleForm2.remark" placeholder="备注"></el-input>
    </el-form-item>
    <el-form-item prop="companyName">
      <el-input type="text" auto-complete="off" v-model="ruleForm2.longitude" placeholder="精度" style="width:50%;float: left;"></el-input>

      <el-input type="text" auto-complete="off" v-model="ruleForm2.latitude" placeholder="纬度" style="width:50%;float: left;"></el-input>
    </el-form-item>
    <el-form-item prop="companyLevel">
        <el-input type="site" auto-complete="off" v-model="ruleForm2.latitude" placeholder="网站"></el-input>
      </el-form-item> -->
      <el-form-item label="验证码:">
        <el-input type="text" style="width:67%" v-model="ruleForm2.verificationCode" auto-complete="off"
          placeholder="验证码"></el-input>
        <button class="account-pb-bt" @click="codesb" type="button">{{codehtml}}</button>
      </el-form-item>

      <el-form-item>
        <el-checkbox v-model="checked">
          <router-link target="_blank" to="/Provision" class="account-right">注册条款</router-link>
        </el-checkbox>
      </el-form-item>
    </div>
    <!-- <router-link to="/monitor"  class="transition-box"  style="float:right">忘记密码</router-link> -->
    <div style="text-align:center;">
      <el-button type="primary" style="width:80%;" @click.native.prevent="handleSubmit2" :loading="logining">注册
      </el-button>
    </div>

  </el-form>
</template>

<script>
  import {
    register,
    code
  } from "../../api/api";
  //import NProgress from 'nprogress'
  export default {
    data() {
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm2.checkPass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        logining: false,
        codes: 300,
        codehtml: "获取验证码",
        ruleForm2: {
          username: '',
          account: "",
          checkPass: "",
          checkPass1: "",
          checkemail: "",
          companyName: "",
          companyLevel: "",
          verificationCode: "",
          address: '',
          remark: '',
          longitude: '',
          latitude: '',
          site: '',
          nickName: '',
          userRegisterType: '1'
        },
        ruleForm3: {
          username: '',
          account: "",
          checkPass: "",
          checkPass1: "",
          checkemail: "",
          companyName: "",
          companyLevel: "",
          verificationCode: "",
          address: '',
          remark: '',
          longitude: '',
          latitude: '',
          site: '',
          nickName: '',
          userRegisterType: '1'
        },
        rules2: {
          nickName: [ 
            {
            required: true,
            message: "请输入昵称",
            trigger: "blur"

          },
            {
            min: 1,
            max: 20,
            message: '长度在 1 到 20 个字符',
            trigger: 'blur'
          }],
          username: [{

            required: true,
            message: "请输入用户名",
            trigger: "blur"

          },{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }],
          account: [

            {
              required: true,
              message: "请输入手机号",
              trigger: "blur"
            },
            {
              pattern: /^((1[35689][0-9])|(14[56789])|(17[012345678])|(19[7]))\d{8}$/,
              message: "请填写正确手机号码",
              trigger: "blur"
            },

          ],
          checkPass: [{
              required: true,
              message: "请输入密码",
              trigger: "blur"
            },
            {
              pattern: /^[a-zA-Z0-9]{6,18}$/,
              message: "密码由6-18位数字和字母组成",
              trigger: "blur"
            }
            //{ validator: validaePass2 }
          ],
          checkPass1: [{
              required: true,
              message: "请输入密码",
              trigger: "blur"
            },
            {
              pattern: /^[a-zA-Z0-9]{6,18}$/,
              message: "密码由6-18位数字和字母组成",
              trigger: "blur"
            },

            { validator: validatePass2, trigger: 'blur' }
          ],
          checkemail: [{
              required: true,
              message: "请输入邮箱",
              trigger: "blur"
            },
            {
              pattern: /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/,
              message: "请输入正确的邮箱",
              trigger: "blur"
            },
            
          ],
          companyName: [{
            required: true,
            message: "请输入组织名",
            trigger: "blur"
          },{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }],
          companyLevel: [{
            required: true,
            message: "请输入职务",
            trigger: "blur"
          }],
          verificationCode: [{
            required: true,
            message: "请输入验证码",
            trigger: "blur"
          }]
        },
        checked: false
      };
    },
    methods: {
      codesb() {
        
        this.$refs.ruleForm2.validate(valid => {
          if (valid) {
        var params = {
          phone: this.ruleForm2.account
        };
        if (this.codes < 300) {
          console.log(this.codes)
          return false;
        }


        code(params).then(data => {
          //NProgress.done();
          let {
            code,
            user,
            message
          } = data;
          if (code !== 0) {
            this.$message({
              message: message,
              type: "error"
            });
          } else {
            this.codehtml = this.codes-- + "s";
            let t = setInterval(() => {
              this.codehtml = this.codes-- + "s";
              if (this.codes == 0) {
                clearInterval(t);
                this.codes = 300;
                this.codehtml = '获取验证码';
              }
            }, 1000);
            this.$message({
              message: '验证码发送成功，请注意查收',
              type: "success"
            });
          }
        });
      }})
      },
      handleReset2() {
        this.$refs.ruleForm2.resetFields();
      },
      handleSubmit2(ev) {
        var _this = this;
        this.$refs.ruleForm2.validate(valid => {
          if (valid) {
            if (!this.checked) {
              this.$message({
                message: '请阅读和勾选使用条款',
                type: "error"
              });
              return false;
            }
            //_this.$router.replace('/table');
            //NProgress.start();
            console.log(this.ruleForm2.account);
            console.log(this.ruleForm2.account.toString().indexOf('.'))
            if (this.ruleForm2.account.toString().indexOf('.') > -1) {
              this.$message({
                message: '手机号码不允许包含小数点',
                type: "error"
              });
              return false;
            }
            var loginParams = {
              userName: this.ruleForm2.username,
              phone: this.ruleForm2.account,
              password: this.ruleForm2.checkPass,
              repassword: this.ruleForm2.checkPass1,
              companyName: this.ruleForm2.companyName,
              companyLevel: this.ruleForm2.companyLevel,
              email: this.ruleForm2.checkemail,
              verificationCode: this.ruleForm2.verificationCode,
              nickName: this.ruleForm2.nickName,
              userRegisterType: this.ruleForm2.userRegisterType,
              dataRestrict:'11'
            };

            this.logining = true;
            register(loginParams).then(data => {
              this.logining = false;
              //NProgress.done();
              let {
                code,
                user,
                message
              } = data;
              if (code !== 0) {
                this.$message({
                  message: message,
                  type: "error"
                });
              } else {
                this.$message({
                  message: '注册成功',
                  type: "succeed"
                });

                this.$router.push({
                  path: "/login"
                });
              }
            });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .login-container {
    /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    margin: 20px auto;
    width: 500px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;

    .title {
      margin: 0px auto 40px auto;
      text-align: center;
      color: #505458;
    }

    .remember {
      margin: 0px 0px 35px 0px;
    }
  }

  .login-border {
    border: 1px solid #0099cc;
    border-radius: 6px;
    padding: 10px 10px 10px 0;
    margin-bottom: 10px;
  }

  .login-border h2 {
    font-size: 20px;
    margin-bottom: 10px;
  }
</style>